<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el与data的两种写法</title>
    <title>Vue数据绑定</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
   <div id="app">
       <h1>你好，{{name}}</h1>
   </div>

   <script type="text/javascript">
    // 阻止Vue在启动时生成提示。
    Vue.config.productionTip = false;

    // el的两种写法
    // const x = new Vue({
    //     //el:'#app'
    //    data: {
    //        name: '北京'
    //    }
    // })

    // console.log(x)

    // 挂载
    // x.$mount('#app')
    // setTimeout(() => {
    //     x.$mount('#app')
    // }, 1000);
    
    // data的两种写法 
    // 组件种使用较多
    new Vue({
        el: '#app',
        // data: {
        //     name: '上海'
        // },
        // 函数式
        // data: function() {
        //     return {
        //         name: '上海'
        //     }
        // }
        // 
        data() {
            console.log('@@', this)
            return {
                name: '上海'
            }
        }
    })
    

   
</script>
</body>
</html>